<template>
  <div class="properties-panel">
    <!-- 基础属性 -->
    <div class="property-group">
      <div class="group-title">位置和大小</div>
      <div class="property-row">
        <label>X:</label>
        <el-input-number 
          v-model="component.x" 
          size="mini" 
          :step="1"
          controls-position="right"
        ></el-input-number>
      </div>
      <div class="property-row">
        <label>Y:</label>
        <el-input-number 
          v-model="component.y" 
          size="mini" 
          :step="1"
          controls-position="right"
        ></el-input-number>
      </div>
      <div class="property-row">
        <label>宽度:</label>
        <el-input-number 
          v-model="component.width" 
          size="mini" 
          :step="1" 
          :min="20"
          controls-position="right"
        ></el-input-number>
      </div>
      <div class="property-row">
        <label>高度:</label>
        <el-input-number 
          v-model="component.height" 
          size="mini" 
          :step="1" 
          :min="20"
          controls-position="right"
        ></el-input-number>
      </div>
    </div>

    <!-- 样式属性 -->
    <div class="property-group" v-if="showStyleProperties">
      <div class="group-title">样式</div>
      <div class="property-row" v-if="component.type !== 'image'">
        <label>背景色:</label>
        <el-color-picker 
          v-model="component.backgroundColor" 
          size="mini"
          show-alpha
        ></el-color-picker>
      </div>
      <div class="property-row" v-if="component.type !== 'image'">
        <label>边框色:</label>
        <el-color-picker 
          v-model="component.borderColor" 
          size="mini"
        ></el-color-picker>
      </div>
      <div class="property-row" v-if="component.type !== 'image'">
        <label>边框宽度:</label>
        <el-input-number 
          v-model="component.borderWidth" 
          size="mini" 
          :step="1" 
          :min="0"
          controls-position="right"
        ></el-input-number>
      </div>
      <div class="property-row">
        <label>透明度:</label>
        <div class="slider-container">
          <el-slider 
            v-model="opacityValue" 
            :min="0" 
            :max="100" 
            :step="5"
            @change="onOpacityChange"
          ></el-slider>
          <span class="opacity-value">{{ Math.round(component.opacity * 100) }}%</span>
        </div>
      </div>
    </div>

    <!-- 文本属性 -->
    <div class="property-group" v-if="showTextProperties">
      <div class="group-title">文本</div>
      <div class="property-row" v-if="component.type === 'text'">
        <label>内容:</label>
        <el-input 
          v-model="component.content" 
          type="textarea" 
          size="mini"
          :rows="3"
          placeholder="请输入文本内容"
        ></el-input>
      </div>
      <div class="property-row">
        <label>字体大小:</label>
        <el-input-number 
          v-model="component.fontSize" 
          size="mini" 
          :step="1" 
          :min="8"
          controls-position="right"
        ></el-input-number>
      </div>
      <div class="property-row">
        <label>字体颜色:</label>
        <el-color-picker 
          v-model="component.textColor" 
          size="mini"
        ></el-color-picker>
      </div>
      <div class="property-row">
        <label>对齐方式:</label>
        <el-select v-model="component.textAlign" size="mini" style="width: 100%">
          <el-option label="左对齐" value="left"></el-option>
          <el-option label="居中" value="center"></el-option>
          <el-option label="右对齐" value="right"></el-option>
        </el-select>
      </div>
      <div class="property-row">
        <label>字体加粗:</label>
        <el-switch 
          v-model="isBold"
          @change="onBoldChange"
        ></el-switch>
      </div>
    </div>

    <!-- 图片属性 -->
    <div class="property-group" v-if="component.type === 'image'">
      <div class="group-title">图片</div>
      <div class="property-row">
        <label>图片链接:</label>
        <el-input 
          v-model="component.src" 
          size="mini" 
          placeholder="请输入图片URL"
        ></el-input>
      </div>
      <div class="property-row">
        <el-button 
          size="mini" 
          type="primary" 
          @click="$emit('select-image')"
          style="width: 100%"
        >选择图片</el-button>
      </div>
      <div class="property-row">
        <label>适应方式:</label>
        <el-select v-model="component.objectFit" size="mini" style="width: 100%">
          <el-option label="适应" value="contain"></el-option>
          <el-option label="填充" value="cover"></el-option>
          <el-option label="拉伸" value="fill"></el-option>
          <el-option label="原始" value="none"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 地图属性 -->
    <div class="property-group" v-if="component.type === 'map'">
      <div class="group-title">地图设置</div>
      <div class="property-row">
        <label>地图类型:</label>
        <el-select v-model="component.mapType" size="mini" style="width: 100%">
          <el-option label="标准地图" value="normal"></el-option>
          <el-option label="卫星地图" value="satellite"></el-option>
          <el-option label="混合地图" value="hybrid"></el-option>
        </el-select>
      </div>
      <div class="property-row">
        <label>缩放级别:</label>
        <el-slider 
          v-model="component.zoomLevel" 
          :min="1" 
          :max="18" 
          :step="1"
        ></el-slider>
      </div>
    </div>

    <!-- 比例尺属性 -->
    <div class="property-group" v-if="component.type === 'scale'">
      <div class="group-title">比例尺设置</div>
      <div class="property-row">
        <label>刻度文本:</label>
        <el-input 
          v-model="component.scaleText" 
          size="mini" 
          placeholder="例如: 0 100 200 300m"
        ></el-input>
      </div>
      <div class="property-row">
        <label>刻度颜色:</label>
        <el-color-picker 
          v-model="component.scaleColor" 
          size="mini"
        ></el-color-picker>
      </div>
    </div>

    <!-- 指北针属性 -->
    <div class="property-group" v-if="component.type === 'compass'">
      <div class="group-title">指北针设置</div>
      <div class="property-row">
        <label>指针颜色:</label>
        <el-color-picker 
          v-model="component.needleColor" 
          size="mini"
        ></el-color-picker>
      </div>
      <div class="property-row">
        <label>外圈颜色:</label>
        <el-color-picker 
          v-model="component.circleColor" 
          size="mini"
        ></el-color-picker>
      </div>
      <div class="property-row">
        <label>旋转角度:</label>
        <el-input-number 
          v-model="component.rotation" 
          size="mini" 
          :step="15" 
          :min="0"
          :max="360"
          controls-position="right"
        ></el-input-number>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="property-group">
      <div class="group-title">操作</div>
      <div class="property-row">
        <el-button 
          size="mini" 
          @click="$emit('duplicate')"
          style="width: 48%; margin-right: 4%"
        >复制</el-button>
        <el-button 
          size="mini" 
          type="danger" 
          @click="$emit('delete')"
          style="width: 48%"
        >删除</el-button>
      </div>
      <div class="property-row">
        <el-button 
          size="mini" 
          @click="moveToTop"
          style="width: 48%; margin-right: 4%"
        >置顶</el-button>
        <el-button 
          size="mini" 
          @click="moveToBottom"
          style="width: 48%"
        >置底</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PropertyPanel',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  computed: {
    showStyleProperties() {
      return !['text', 'compass', 'scale'].includes(this.component.type)
    },
    showTextProperties() {
      return this.component.type === 'text' || this.component.text !== undefined
    },
    opacityValue: {
      get() {
        return Math.round(this.component.opacity * 100)
      },
      set(value) {
        this.component.opacity = value / 100
      }
    },
    isBold: {
      get() {
        return this.component.fontWeight === 'bold'
      },
      set(value) {
        this.component.fontWeight = value ? 'bold' : 'normal'
      }
    }
  },
  created() {
    // 确保组件有必要的默认属性
    this.ensureDefaultProperties()
  },
  watch: {
    component: {
      handler() {
        this.ensureDefaultProperties()
      },
      deep: true
    }
  },
  methods: {
    onOpacityChange(value) {
      this.component.opacity = value / 100
    },
    onBoldChange(value) {
      this.component.fontWeight = value ? 'bold' : 'normal'
    },
    moveToTop() {
      this.$emit('move-to-top')
    },
    moveToBottom() {
      this.$emit('move-to-bottom')
    },
    ensureDefaultProperties() {
      // 确保透明度属性存在
      if (this.component.opacity === undefined) {
        this.$set(this.component, 'opacity', 1)
      }
      
      // 确保字体属性存在
      if (this.showTextProperties) {
        if (this.component.fontSize === undefined) {
          this.$set(this.component, 'fontSize', 14)
        }
        if (this.component.textColor === undefined) {
          this.$set(this.component, 'textColor', '#333333')
        }
        if (this.component.textAlign === undefined) {
          this.$set(this.component, 'textAlign', 'center')
        }
        if (this.component.fontWeight === undefined) {
          this.$set(this.component, 'fontWeight', 'normal')
        }
      }
      
      // 为图片组件添加特定属性
      if (this.component.type === 'image') {
        if (this.component.objectFit === undefined) {
          this.$set(this.component, 'objectFit', 'contain')
        }
      }
      
      // 为地图组件添加特定属性
      if (this.component.type === 'map') {
        if (this.component.mapType === undefined) {
          this.$set(this.component, 'mapType', 'normal')
        }
        if (this.component.zoomLevel === undefined) {
          this.$set(this.component, 'zoomLevel', 10)
        }
      }
      
      // 为比例尺组件添加特定属性
      if (this.component.type === 'scale') {
        if (this.component.scaleColor === undefined) {
          this.$set(this.component, 'scaleColor', '#333333')
        }
      }
      
      // 为指北针组件添加特定属性
      if (this.component.type === 'compass') {
        if (this.component.needleColor === undefined) {
          this.$set(this.component, 'needleColor', '#ff4444')
        }
        if (this.component.circleColor === undefined) {
          this.$set(this.component, 'circleColor', '#333333')
        }
        if (this.component.rotation === undefined) {
          this.$set(this.component, 'rotation', 0)
        }
      }
    }
  }
}
</script>

<style scoped>
.properties-panel {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.property-group {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.group-title {
  background: #f8f9fa;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  border-bottom: 1px solid #e0e0e0;
}

.property-row {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  min-height: 40px;
}

.property-row:last-child {
  border-bottom: none;
}

.property-row label {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
  min-width: 60px;
  white-space: nowrap;
}

.property-row .el-input-number,
.property-row .el-select,
.property-row .el-input {
  width: 120px;
}

.property-row .el-color-picker {
  width: auto;
}

.property-row .el-slider {
  width: 80px;
}

.slider-container {
  display: flex;
  align-items: center;
  width: 120px;
}

.opacity-value {
  margin-left: 10px;
  font-size: 12px;
  color: #666;
  min-width: 30px;
}

/* 响应式布局调整 */
@media (max-width: 1400px) {
  .property-row .el-input-number,
  .property-row .el-select,
  .property-row .el-input {
    width: 100px;
  }
  
  .slider-container {
    width: 100px;
  }
  
  .property-row .el-slider {
    width: 60px;
  }
}

/* 滚动条样式 */
.properties-panel::-webkit-scrollbar {
  width: 6px;
}

.properties-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.properties-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.properties-panel::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>
